<script setup>
  // 1.导入task.js文件并调用list方法获取在途订单
  import taskApi from '@/apis/task.js'
  import { onMounted, ref } from 'vue'
  // 2. 定义响应式数据接收服务器的数据并渲染到界面
  // 在途任务列表
  const deliveryList = ref([])
  onMounted(async () => {
    let res = await taskApi.list(2)
    // console.log(res)
    deliveryList.value = res.data.data.items
  })
</script>
<template>
  <scroll-view scroll-y refresher-enabled class="scroll-view">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="item in deliveryList" :key="item.id">
        <navigator
          hover-class="none"
          :url="'/subpkg_task/detail/index?id=' + item.id"
        >
          <view class="header">
            <text class="no">任务编号: {{ item.transportTaskId }}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ item.startAddress }}</view>
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ item.planDepartureTime }}</view>
          <navigator
            v-if="item.status === 2"
            hover-class="none"
            :url="'/subpkg_task/delivery/index?id=' + item.id"
            class="action"
          >
            交付
          </navigator>

          <navigator
            v-if="item.status === 4"
            hover-class="none"
            :url="`/subpkg_task/record/index?transportTaskId=${item.transportTaskId}&actualDepartureTime=${item.actualDepartureTime}`"
            class="action"
            >回车登记</navigator
          >
        </view>
      </view>
      <!-- <view class="task-card">
        <navigator hover-class="none" url="/subpkg_task/detail/index?id=001">
          <view class="header">
            <text class="no">任务编号: XAHH1234567</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >北京市昌平区回龙观街道西三旗桥东金燕龙写字楼8877号</view
              >
              <view class="line">河南省郑州市路北区北清路99号</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">2022.05.04 13:00</view>
          <navigator
            hover-class="none"
            url="/subpkg_task/record/index"
            class="action"
            >回车登记</navigator
          >
        </view>
      </view> -->
      <view v-if="false" class="task-blank">无在途货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
